import React, {useEffect, useRef} from "react";
import init from "@/components/ThreeScene/SceneInit.ts";
import ObjApi from "@/api/ObjApi.ts";
import {createStyles} from "antd-style";

const useStyle = createStyles(({css, token}) => {
    return {
        threeScene: css`
            display: block;
            position: fixed;
            left: 0;
            top: 0;
            z-index: -10;
        `
    }
})

interface Props {
    imageLink: string
}

const Scene: React.FC<Props> = ({imageLink}) => {
    const styles = useStyle().styles;
    const threeScene = useRef<HTMLDivElement>();
    useEffect(() => {
        const {autoRotate, dispose} = init(threeScene.current, ObjApi.getObjLink(imageLink));
        let timer = null
        const fn = () => {
            autoRotate(false)
            if (timer != null) {
                clearTimeout(timer)
            }
            timer = setTimeout(() => {
                autoRotate(true)
            }, 5000)
        }
        document.addEventListener("mousedown", fn)
        fn()
        return () => {
            dispose()
        }
    }, [imageLink]);

    return (
        <div className={styles.threeScene} ref={threeScene}></div>
    )
}

export default Scene